<template>
  <van-field
    :model-value="modelValue"
    readonly
    :required="required"
    :label="title"
    :placeholder="`请选择${title}`"
    @click-input="clickSelectDate"
  />

  <van-popup
    v-model:show="visible"
    position="bottom"
  >
    <van-time-picker
      :model-value="selectValue"
      title="选择时间"
      @cancel="clickCancel"
      @confirm="clickConfirm"
    />
  </van-popup>
</template>

<script setup>
import moment from 'moment';
import { computed, toRefs, ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  required: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:modelValue', 'confirm'])

const visible = ref(false)
const minDate = new Date()

const selectValue = computed(() => {
  const { modelValue } = toRefs(props)
  return (modelValue.value || `19:00`).split(':')
})

function clickSelectDate () {
  const { readonly } = toRefs(props)
  if (readonly.value) return
  visible.value = true
}
function clickCancel () {
  visible.value = false
}
function clickConfirm ({ selectedValues }) {
  emits('update:modelValue', selectedValues.join(':'))
  emits('confirm', { value: selectedValues })
  clickCancel();
}

</script>